import React from 'react'
// prettier-ignore
import {
  Text,
  View,
  StyleSheet,
} from 'react-native'

import {useNavigation} from '@react-navigation/native'
import RxButtonLineBlue from '../../../../components/button/RxButtonLineBlue'
import RxColors from '../../../../commons/styles/RxColors'

const bgColors = {
  purple: ['#d6dfff', '#adbffd'],
  blue: ['#b9ebff', '#91dbff'],
  pink: [''],
}

const HomeBlock = props => {
  const navigation = useNavigation()
  console.log('HomeBlock navigation=', navigation)
  const push = pageName => {
    navigation.navigate(pageName)
  }
  return (
    <View style={styles.container}>
      <View style={styles.tip}>
        <Text style={styles.tipText}>预设</Text>
      </View>
      <View style={styles.content}>
        <BlockView
          txt={'敦煌配置'}
          des={'描述'}
          colors={bgColors.purple}
          onPress={() => push('homeDunHuang')}
        />
        <BlockView
          txt={'敦煌悬浮框设置'}
          des={'描述'}
          colors={bgColors.blue}
          onPress={() => push('homeFloat')}
        />
      </View>
    </View>
  )
}

const BlockView = props => {
  const {txt, des, colors, onPress} = props
  return (
    <RxButtonLineBlue
      style={styles.blockMain}
      colors={colors}
      orientation={'vertical'}
      noPadding={true}
      onPress={onPress}>
      <View style={styles.block}>
        <Text style={styles.blockTxt}>{txt}</Text>
        <Text style={styles.blockDes}>{des}</Text>
      </View>
    </RxButtonLineBlue>
  )
}

export default HomeBlock

const styles = StyleSheet.create({
  container: {
    marginTop: 10,
    padding: 5,
    borderRadius: 10,
    backgroundColor: RxColors.White,
  },
  tip: {
    display: 'flex',
    justifyContent: 'center',
    padding: 5,
  },
  tipText: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  content: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: 10,
  },
  blockMain: {
    marginTop: 10,
    marginLeft: 5,
    marginRight: 2,
    borderRadius: 4,
    width: '48%',
    height: 70,
    backgroundColor: 'red',
  },
  block: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  blockTxt: {
    fontSize: 14,
    color: RxColors.White,
  },
  blockDes: {
    marginTop: 4,
    fontSize: 12,
    color: RxColors.White,
  },
})
